<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<%
	String path = request.getContextPath();
	String fbh = request.getParameter("fbh");
	
%>
<title>模板设置</title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/btn_class.css" />
<link rel="stylesheet" type="text/css"
	href="<%=path%>/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/extjs/style.css" />
<script type="text/javascript"
	src="<%=path%>/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=path%>/extjs/ext-all.js"></script>
<script language="JavaScript" src="../../flash/FusionCharts.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

	<style type="text/css">
	
    </style>

<body bgcolor='#FFFFFF'>

	<script type="text/javascript">
	Ext.BLANK_IMAGE_URL = "<%=path%>/extjs/resources/images/default/s.gif";
	
	Ext.onReady(function() {
		Ext.QuickTips.init();
		
	});
	
	function demo(obj) {
		
		var Tree_op = top.Ext.tree;
		var loader_op = new Tree_op.TreeLoader({
			dataUrl : 'reportInfo!findReportTree.do'
		});
		loader_op.on("beforeload", function(treeLoader, node) {
			loader_op.baseParams.fflag = "1";//图表类型树
			//loader.baseParams.fcode  = node.attributes.fcode;
		}, this);

		loader_op.processResponse = function(response, node, callback) {
			var json1 = response.responseText;
			try {
				var json = eval("(" + json1 + ")");
				node.beginUpdate();
				//从json中取得json数组
				var o = json["key"];
				for ( var i = 0, len = o.length; i < len; i++) {
					var n = this.createNode(o[i]);
					if (n) {
						node.appendChild(n);
					}
				}
				node.endUpdate();
				if (typeof callback == "function") {
					callback(this, node);
				}
			} catch (e) {
				this.handleFailure(response);
			}
		};

		var tree_op = new Tree_op.TreePanel({
			//region : 'center',
			id : 'west-panel',
			//el : 'west-div',
			width : '100%',
			height : 430,
			useArrows : true,
			autoScroll : true,
			animate : true,
			enableDD : true,
			containerScroll : true,
			rootVisible : false, //树根不可见
			loader : loader_op
		});

		//单击事件
		tree_op.on('click', function(node) {
			if (node.isLeaf()) { //是图表
				top.Ext.get("fbh_id").dom.value = node.id;
			}
		}, tree_op);

		// set the root node
		var root_op = new Tree_op.AsyncTreeNode({
			text : '所有图表',
			draggable : false,
			id : '0',
			fbh : '-1',
			ftype : '1'
		});
		tree_op.setRootNode(root_op);
		root_op.expand();
		
		var type_combox = new top.Ext.form.ComboBox({
			id : 'type_id',
			name : 'type_id',
			mode : 'local',
			fieldLabel : '图表类型',
			valueField : 'type_id',
			displayField : 'type_name',
			triggerAction : 'all',
			width : 120,
			listeners : {
				select:function(){
					loader_op.on("beforeload", function(treeLoader, node) {
						loader_op.baseParams.fflag = this.value;//图表类型树
					}, this);
					tree_op.root.reload();
				}
			},
			store : new Ext.data.SimpleStore( {
				fields : [ 'type_id', 'type_name' ],
				data : [ [ 1, '报表' ], [ 99, '图表' ]] })
		});  
		
		var btn_sure_template = new top.Ext.Button({
			text : '确定',
			iconCls : 'sy-save',
			handler : function() {
				var typeStr = top.Ext.get("type_id").dom.value;
				if(typeStr == null || typeStr == "") {
					typeStr = "1";
				}
				
				//日工作量统计图
			  	Ext.Ajax.request({
			  		url : 'reportInfo!produceTemplateSet.do',
					method : 'POST',
					params : {
						"p_fbh" : document.getElementById("p_fbh_id").value,
						"fbh" : top.Ext.get("fbh_id").dom.value,
						"fwidth" : top.Ext.get("fwidth_id").dom.value,
						"fheight" : top.Ext.get("fheight_id").dom.value,
						"div_id" : obj.id,
						"ftype" : typeStr
					},
					success : function(response, action) {
						document.getElementById(obj.id).innerHTML = "<font color=blue>设置成功</font>";
					  	template_choose_window.close();
					},
					// 提交失败的回调函数
					failure : function() {
						top.Ext.Msg.alert('错误', '服务器出现错误请稍后再试！');
					}
				});
			}
		});
		
		var btn_cancel_template = new top.Ext.Button({
			text : '取消',
			iconCls : 'sy-reset',
			handler : function() {
				template_choose_window.close();
			}
		});
		
		var firstTbar = new top.Ext.Toolbar({
			items:[ '宽度:', {
				xtype : 'numberfield',
				name : 'ffontsize',
				id : 'fwidth_id',
				maxLength : 4,
				minLength : 2,
				value : 400,
				width : 80
			  }, '-', '高度:', {
					xtype : 'numberfield',
					name : 'ffontsize',
					id : 'fheight_id',
					maxLength : 4,
					minLength : 2,
					value : 300,
					width : 80
				  } ] 
			});
		
		var template_choose_window = new top.Ext.Window({
			width : 380,
			height : 500,
			title : '设置模板单元',
			iconCls : 'sy-win-flag',
			modal : true,
			tbar : [ '单元类型:', type_combox, '-', btn_sure_template, '-', btn_cancel_template, {
				xtype : 'hidden',
				name : 'fbh',
				id : 'fbh_id'
			} ],
			listeners : {
				'render' : function(){
					firstTbar.render(this.tbar); 
				}
		 	},
			items : [ tree_op ]
		});
		template_choose_window.show();
			//document.getElementById("tt").innerHTML = "esponseText";
		}
	</script>
	<a id="p_fbh_id" value=""></a>
	<table><tr><td id="tt">
	<div id="chart1" name="chart1" align=center style="border: 1px solid #c3daf9;width:300px;height:300px;" onclick="demo(this);">ddd</div>
</td></tr><tr><td id="tt">
	<div id="chart2" name="chart1" align=center style="border: 1px solid #c3daf9;width:300px;height:300px;" onclick="demo(this);">ddd</div>
</td></tr><tr><td id="tt">
	<div id="chart3" name="chart1" align=center style="border: 1px solid #c3daf9;width:300px;height:300px;" onclick="demo(this);">ddd</div>
</td></tr></table>
	
</body>
</html>